<!-- 题目详情预览框 -->
<template>
  <el-dialog v-model="previewDialogVisible" title="题目预览" width="60%">
    <div v-if="currentQuestion" class="question-preview">
      <div class="question-header">
        <el-tag
            :type="getTypeTag(currentQuestion.typeId)"
            class="question-type"
        >
          {{ getTypeText(currentQuestion.typeId) }}
        </el-tag>
        <el-rate
            v-model="currentQuestion.difficulty"
            disabled
            show-score
            text-color="#ff9900"
        />
        <span class="question-public">{{
            currentQuestion.isPublic ? "公开" : "不公开"
          }}</span>
      </div>
      <div class="question-content">{{ currentQuestion.content }}</div>
      <div v-if="currentQuestion.options" class="question-options">
        <div
            v-for="(option, key) in JSON.parse(currentQuestion.options)"
            :key="key"
            class="option-item"
        >
          {{ key }}. {{ option }}
        </div>
      </div>
      <div class="question-answer">
        <p><strong>正确答案：</strong>{{ currentQuestion.answer }}</p>
        <p v-if="currentQuestion.analysis">
          <strong>解析：</strong>{{ currentQuestion.analysis }}
        </p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getTypeTag, getTypeText } from '../../utils/utils.js'

const previewDialogVisible = ref(false)
const currentQuestion = ref(null)

// 预览题目
const handlePreview = (row) => {
  currentQuestion.value = row
  if (10002 === currentQuestion.value.typeId) {
    try {
      let answerArr = JSON.parse(currentQuestion.value.answer)
      let answerStr = answerArr[0]
      for (let i = 1; i < answerArr.length; i++) {
        answerStr = answerStr + " 、" + answerArr[i]
      }
      currentQuestion.value.answer = answerStr
    } catch (e) {}
  }
  previewDialogVisible.value = true
}

// 暴露给父组件的方法
defineExpose({
  handlePreview,
  previewDialogVisible
})
</script>

<style scoped>
.selection-header span {
  font-size: larger;
  color: var(--el-text-color-regular);
}

.selected-questions h4 {
  margin-bottom: 10px;
}

.question-preview {
  padding: 20px;
  border-top: #ddd 1px solid;
}

.question-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.question-type {
  font-size: 16px;
}

.question-content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.question-options {
  margin-bottom: 20px;
}

.option-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.question-answer {
  color: #606266;
  line-height: 1.8;
}
</style>